<script setup>
import ModalBox from '@/components/ModalBox/ModalBox.vue'
import UploadImage from "@/components/UploadImage/UploadImage.vue"
import { message } from 'ant-design-vue';
import { reactive, ref, toRaw, inject, watch } from 'vue';
import { Form } from 'ant-design-vue';
import {createUser} from "@/apis/user"
const useForm = Form.useForm;
const open = ref(false);
const formRef = ref();
const RoleTypeOptionsEnum = [
    {
        label: "后台",
        value: "admin",

    },
    {
        label: "OA",
        value: "oa",
    },
    {
        label: "CRM",
        value: "crm",

    },
]
const formState = reactive({
    id:"",
    username: "",
    password: "",
    nickName:"",
    email: "",
    enabled: 0,
    img:"",
});
const getUser=inject("getUser")
const value = ref([]);
const { resetFields, validate, validateInfos } = useForm(
    formState,
    reactive({
        username: [{ required: true, message: '请输入账号', trigger: 'blur', }],
        nickName: [{ required: true, message: '请输入昵称', trigger: 'blur', }],
        password: [{ required: true, message: '请输入密码', trigger: 'blur', }],
        email: [{ required: true, message: '请输入邮箱', trigger: 'blur', }],
    }),
);
watch(()=>open.value,()=>{
    if(!open.value){
        for (const key in formState){
            formState[key]="";
        };
    }

})
const onSubmit = () => {
    formRef.value
        .validate()
        .then(() => {
            craeteEdit()
        })
        .catch(error => {
            console.log('error', error);
        });
};
const handleOk = (options) => {
    validate()
        .then(res => {
            open.value = false;
            operate();
        })
        .catch(err => {
            console.log('error', err);
        });
}
const handleCancel = () => {
    open.value = false
}
const operate = async () => {
    let res = await createUser(formState);
    if (res.code === 200) {
        getUser();
    } else {
        message.error(res.msg);
    }
}
const uploadImg = (file) => {
    console.log("file",file);
    formState.img=file
}
const deleteFile = (options) => {
    formState.img = options
}
defineExpose({ open, formState })

</script>
<template>
    <modal-box title="创建角色" :isOpen="open" @ok="handleOk" @cancel="handleCancel" width="500px">
        <template #content>
            <div>
                <a-form ref="formRef" :model="formState" @finish="handleOk">
                    <a-form-item label="用户账号" v-bind="validateInfos.username">
                        <a-input v-model:value="formState.username" placeholder="请输入名称" />
                    </a-form-item>
                    <a-form-item label="用户昵称" v-bind="validateInfos.nickName">
                        <a-input v-model:value="formState.nickName" placeholder="请输入昵称" />
                    </a-form-item>
                    <a-form-item label="用户密码" v-bind="validateInfos.password">
                        <a-input v-model:value="formState.password" placeholder="请输入密码" />
                    </a-form-item>
                    <a-form-item label="用户邮箱" v-bind="validateInfos.email">
                        <a-input v-model:value="formState.email" placeholder="请输入邮箱" />
                    </a-form-item>
                    <a-form-item  label="是否使用状态" v-bind="validateInfos.enabled">
                        <a-select v-model:value="formState.enabled" :allowClear="true">
                            <a-select-option :value="0">否</a-select-option>
                            <a-select-option :value="1">是</a-select-option>
                        </a-select>
                    </a-form-item>
                    <a-form-item label="用户头像" v-bind="validateInfos.roleName">
                        <UploadImage  @upload="uploadImg" :list="formState.img"  :maxNum="1" @delete="deleteFile"/>
                    </a-form-item>
                </a-form>
            </div>
        </template>
    </modal-box>
</template>
<style lang='scss' scoped>
.description {
    width: 100% !important;
    margin-right: 0px !important;
}

:deep(.ant-form) {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

:deep(.ant-form-item) {
    width: 100%;
    margin-right: 10px;

    // &:nth-child(2n) {
    //     margin-right: 0;
    // }
}

:deep(.ant-form-item-label) {
    width: 110px;
}
</style>